<template>
  <div>
    <h2>用户列表</h2>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.username }} - {{ user.email }}
        <button @click="viewUser(user.id)">查看详情</button>
      </li>
    </ul>
    <p v-else>暂无用户数据</p>
  </div>
</template>

<script>
export default {
  computed: {
    users() {
      return this.$store.getters['auth/allUsers']
    }
  },
  created() {
    this.$store.dispatch('auth/fetchAllUsers')
  },
  methods: {
    viewUser(userId) {
      this.$router.push(`/user/${userId}`)
    }
  }
}
</script>